<template>
	<view>
		<view class="top">
			<view class="video_tit">
				<view @click="change(1000)" class="items " :class="data.params.type==1000?'itemsselect':''">
					全部
					<view class="xs" v-show="data.params.type==1000"></view>
				</view>
				<view @click="change(1)" class="items" :class="data.params.type==1?'itemsselect':''">
					合作
					<view class="xs" v-show="data.params.type==1"></view>
				</view>
				<view @click="change(2)" class="items" :class="data.params.type==2?'itemsselect':''">
					需求
					<view class="xs" v-show="data.params.type==2"></view>
				</view>
			</view>

			<view class="btn flex_jc_cent" @click="gofbbusiness">
				<uni-icons style="margin-right: 6rpx;" type="plus-filled" color="#fff" size="22"></uni-icons>
				去发布
			</view>
		</view>
		<view class="ulist">
			<view class="items" v-for="(item,index) in data.businessList" :key="index"
				@click="$pageGo(`/pages/business/businessdetail?id=${item.id}`)">
				<view class="flex_jc_sb">
					<view class="flex">
						<view class="flex">
							<image class="headimg" :src="item.user.avatar_text" mode="aspectFill"></image>
							<view class="name">
								{{item.user.nickname}}
							</view>
						</view>
						<view class="tip">
							第{{item.user.meeting_num}}期会员
						</view>
					</view>
					<view class="btns flex">
						<view v-if="item.mobile" class="flex_jc_cent btn b1" @click.stop="$phoneCall(item.mobile)" style="margin-right: 10rpx;">
							<image class="icon" src="/static/sj.png" mode=""></image>
							<view class="">
								联系TA
							</view>
						</view>
						<view v-if="item.wechat" class="flex_jc_cent btn b2" @click.stop="$copyFun(item.wechat,'微信已复制')">
							<image class="icon" src="/static/wx.png" mode=""></image>
							<view class="">
								联系TA
							</view>
						</view>
					</view>
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view v-if="item.images_arr.length!=0"
					:class="item.images_arr.length>2?'imageCss':'imageCss'+item.images_arr.length">
					<image @click.stop="$previewImage(item.images_arr,inx)" v-for="(i,inx) in item.images_arr"
						:key="inx" :src="i" mode="aspectFill"></image>
				</view>
				<view class="tipp">
					{{item.type==1?'#合作':'#需求'}}
				</view>
			</view>
		</view>
		<view class="" style="height: 66rpx;">

		</view>
		<view class="k1" v-if="data.businessList.length == 0">
			<image src="/static/bkong.png" mode=""></image>
			<view class="texts">
				暂无内容
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getBusinessList
	} from '@/common/http.api.js';

	const data = reactive({
		params: {
			p: 1,
			type: 1000,
			page: 1,
			limit: 10
		},
		businessList: []
	})

	onShow(() => {
		data.params.page = 1
		getBusinessList(data.params).then(res => {
			data.businessList = res.data
		})
	})
	onReachBottom(() => {
		data.params.page++
		getList()
	})
	function getList() {
		getBusinessList(data.params).then(res => {
			data.businessList.push(...res.data)
		})
	}
	function change(i) {
		data.params.type = i
		data.params.page = 1
		data.businessList = []
		getList()
	}
	
	
	function gofbbusiness(){
		if(uni.getStorageSync('cirleToken')){
			if(uni.getStorageSync('user').level==2){
				uni.navigateTo({
					url:'/pages/business/fbbusiness'
				})
			}else{
				uni.showModal({
					title:'系统提示',
					content: '您非正式会员，暂无发布权限！',
					confirmText:'确认',
					confirmColor:'#0756FF',
					showCancel:false,
					success: (res) => {
						if (res.confirm) {
						} else if (res.cancel) {}
					}
				});
			}
		}else{
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
		 
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
	}

	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.top {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0rpx;
		z-index: 9;

		.video_tit {
			display: flex;
			justify-content: space-between;
			width: 350rpx;

			.items {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #2F3245;
			}

			.itemsselect {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.xs {
				width: 32rpx;
				height: 6rpx;
				background: #0756FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin: 6rpx auto 0rpx;
			}

		}

		.btn {
			width: 180rpx;
			height: 68rpx;
			background: linear-gradient(126deg, #58A4FF 0%, #006FFF 100%);
			border-radius: 112rpx 112rpx 112rpx 112rpx;
			text-align: center;
			line-height: 68rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.ulist {
		.items {
			margin: 20rpx auto;
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.headimg {
				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;
			}

			.tipp {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0756FF;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				margin-left: 10rpx;
			}

			.tip {
				margin-left: 10rpx;
				height: 40rpx;
				background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #F9B781;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #8A3E00;
				line-height: 40rpx;
				text-align: center;
				padding: 0 6rpx;
			}

			.btns {
				.btn {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					width: 150rpx;
					height: 52rpx;
					text-align: center;
				}

				.b1 {
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 1px solid #0973ED;
					color: #0973ED;
				}

				.b2 {
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 1px solid #08C985;
					color: #08C985;
				}

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //几行就填几
				-webkit-box-orient: vertical;
				margin: 20rpx auto;
			}

			.imageCss1 {
				margin-bottom: 20rpx;

				image {
					width: 670rpx;
					height: 280rpx;
					border-radius: 20rpx;
				}
			}

			.imageCss2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				image {
					width: 320rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}

			.imageCss {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: 210rpx;
					height: 160rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>